<!-- /templates/product.liquid -->
{% comment %}

  Rich snippets (itemscope, itemtype, etc.) for products are a theme requirement,
  and allow search engines to easily understand what the content is.

  For more information on these Scheme.org tags, visit:
    - http://schema.org/docs/gs.html

{% endcomment %}

<div itemscope itemtype="http://schema.org/Product">

  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">

  {% include 'breadcrumb' %}

  <div class="grid product-single">
    <div class="grid__item large--one-half text-center">
      <div class="product-single__photos" id="ProductPhoto">
        {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
        <img src="{{ featured_image | img_url: 'large' }}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg">
      </div>

      {% comment %}
        Create thumbnails if we have more than one product image
      {% endcomment %}
      {% if product.images.size > 1 %}
        <ul class="product-single__thumbnails grid-uniform" id="ProductThumbs">

          {% for image in product.images %}
            <li class="grid__item one-quarter">
              <a href="{{ image.src | img_url: 'large' }}" class="product-single__thumbnail">
                <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
              </a>
            </li>
          {% endfor %}

        </ul>
      {% endif %}
    </div>

    <div class="grid__item large--one-half">

      <h1 itemprop="name">{{ product.title }}</h1>

      <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">

        {% comment %}
          Get first variant, or deep linked one
        {% endcomment %}
        {% assign variant = product.selected_or_first_available_variant %}

        <meta itemprop="priceCurrency" content="{{ shop.currency }}">

        <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

        {% comment %}
          ID addToCartForm is a selector for the ajaxify cart plugin
        {% endcomment %}
        <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">

          {% comment %}
            Add product variants as a dropdown.
              - By default, each variant (or combination of variants) will display as its own <option>
              - To separate these into multiple steps, which we suggest, use option_selection.js (see below)

            You can leverage jQuery to add a callback on page load and each time the select element changes:
              - Include option_selection.js (as seen at the bottom of this file)
              - This allows you to use JavaScript anytime the variant dropdown changes
              - This also separates out your variant options (ie. size, color, etc.) to separate select elements

            For more information on products with multiple options, visit:
              - http://docs.shopify.com/support/your-website/themes/can-i-make-my-theme-use-products-with-multiple-options#update-product-liquid
          {% endcomment %}
          <select name="id" id="productSelect" class="product-single__variants">
            {% for variant in product.variants %}
              {% if variant.available %}

                {% comment %}
                  Note: if you use option_selection.js, your <select> tag will be overwritten, meaning what you have inside <option> will not reflect what you coded below.
                {% endcomment %}
                <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

              {% else %}
                <option disabled="disabled">
                  {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                </option>
              {% endif %}
            {% endfor %}
          </select>

          {% comment %}
            Optionally show the 'compare at' or original price of the product.
          {% endcomment %}
          <span id="ProductPrice" class="h2{% if product.compare_at_price > product.price %} on-sale{% endif %}" itemprop="price">
            {{ product.price | money }}
          </span>

          {% if product.compare_at_price > product.price %}
            <p id="ComparePrice">
              {{ 'products.product.compare_at' | t }} {{ product.compare_at_price_max | money }}
            </p>
          {% endif %}

          <label for="Quantity" class="quantity-selector">{{ 'products.product.quantity' | t }}</label>
          <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">

          <button type="submit" name="add" id="AddToCart" class="btn">
            <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
          </button>
        </form>

      </div>

      <div class="product-description rte" itemprop="description">
        {{ product.description }}
      </div>

      {% comment %}
        If the user is on a collection product page (ie with /collections/collection-handle/products/product-handle)
        in the URL, we can show next/previous links to other products in the collection.
      {% endcomment %}
      {% if collection %}
        {% if collection.previous_product or collection.next_product %}
          <p>

          {% if collection.previous_product %}
            {% capture prev_url %}{{ collection.previous_product}}#content{% endcapture %}
            <span class="left">
              {{ 'products.general.previous_product_html' | t | link_to: prev_url }}
            </span>
          {% endif %}

          {% if collection.next_product %}
            {% capture next_url %}{{ collection.next_product}}#content{% endcapture %}
            <span class="right">
              {{ 'products.general.next_product_html' | t | link_to: next_url }}
            </span>
          {% endif %}

          </p>
        {% endif %}
      {% endif %}

    </div>
  </div>

</div>

{% comment %}
  To take advantage of a callback on the select dropdown, add option_selection.js
  and customize the JS in timber.productPage as needed.

  Currently, timber.productPage does the following:
    - Hides your <select> tag from above
    - Breaks out the product variants into separate product options, if more than one exists
    - Generates a <select> tag for each product option
    - Enables/disables elements based on variant availability

  Callback notes:
    - Keep the callback available to the global scope (window.selectCallback) so that advanced
      addons can override it.
      * E.g. multiple currencies http://docs.shopify.com/manual/configuration/store-customization/currencies-and-translations/currencies/how-to-toggle-between-two-currencies
{% endcomment %}
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script>
  var selectCallback = function(variant, selector) {
    timber.productPage({
      money_format: "{{ shop.money_format }}",
      variant: variant,
      selector: selector
    });
  };

  jQuery(function($) {
    new Shopify.OptionSelectors('productSelect', {
      product: {{ product | json }},
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });

    // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
    {% if product.options.size == 1 and product.options.first != 'Title' %}
      $('.selector-wrapper:eq(0)').prepend('<label for="productSelect-option-0">{{ product.options.first | escape }}</label>');
    {% endif %}

    // Hide selectors if we only have 1 variant and its title contains 'Default'.
    {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
      $('.selector-wrapper').hide();
    {% endif %}
  });
</script>
